<script setup lang="ts">
defineProps<{
  icon: string
  data: { title: string, value: string | number, unit: string, [key: string]: any }
  isVertical?: boolean
}>()
</script>

<template>
  <div class="item-summary-info flex items-center">
    <div class="icon h-14 w-14 flex items-center justify-center">
      <img :src="icon" class="h-7 w-7">
    </div>
    <div
      class="info h-12 flex flex-auto px-3 -ml-1"
      :class="{
        'flex-col': isVertical,
        'justify-center': isVertical,
        'pt-2': isVertical,
        'items-center': !isVertical,
      }"
    >
      <div class="text-[#B8DFF7]">
        {{ data.title }}
      </div>
      <div
        class="flex items-center" :class="{
          'ml-auto': !isVertical,
        }"
      >
        <span class="text-lg text-[#17E6FF] font-pmzd">{{ data.value }}</span>
        <span class="ml-2 text-sm opacity-80">{{ data.unit }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.item-summary-info {
  .icon {
    background: url('./icon-bg.png') no-repeat;
    background-size: 100% 100%;
    background-position: center center;
  }
  .info {
    background: rgba(20, 58, 112, 0.4);
    border: 1px solid rgb(20, 58, 112);
  }
}
</style>
